<template>
  <div>
    <div class="big">
      <img
        src="https://img1.baidu.com/it/u=3800597531,3907701828&fm=26&fmt=auto&gp=0.jpg"
      />
      <div class="icon">
        <i class="iconfont icon-zuojiantou fontz" @click="fun()"></i>
        <i class="iconfont icon-gengduo-shuxiang fontz"></i>
      </div>
      <div class="btm">
        <div class="jinri">
          <p class="riqi">06/09</p>
          <p>
            查看今日运势<i
              class="iconfont icon-jiantou_liebiaoxiangyou_o fontz"
            ></i>
          </p>
        </div>

        <div class="lishi">
          <span>历史日推</span>
        </div>
      </div>
      <div class="boFang">
        <i class="iconfont icon-bofang-copy zidong1">&nbsp;</i><b>播放全部</b>
        <i class="iconfont icon-duihao zidong"></i>
      </div>
    </div>
    <!-- <Zj
      v-for="(v, i) in arr"
      :key="i"
      :imgurl="v.imgurls"
      :singname="v.singnames"
      :name="v.names"
    /> -->
    <Zj
      v-for="(v, i) in arr"
      :key="i"
      :imgurl="v.singimg"
      :singname="v.singname"
      :name="v.singauthor"
      :singul="v.singurl"
    />
  </div>
</template>

<script>
import { getlink } from "@/api/getlink.js";
import Zj from "../zujian/zujian1";
export default {
  methods: {
    fun() {
      this.$router.push("/home");
    },
  },
  data() {
    return {
      // arr: [
      //   {
      //     imgurls:
      //       "http://p2.music.126.net/Y2z7gAOZ7UyQX1dDY8H8Qw==/109951165603442419.jpg?imageView=1&type=webp&thumbnail=246x0",
      //     singnames: "大城小爱",
      //     names: "刘易斯-大城小爱",
      //   },
      //   {
      //     imgurls:
      //       "http://p2.music.126.net/78_j7_YW6MO5m94Uk4DCig==/109951165884860386.jpg?imageView=1&type=webp&thumbnail=246x0",
      //     singnames: "王牌大虾",
      //     names: "金善彬-王牌大虾",
      //   },
      //   {
      //     imgurls:
      //       "http://p2.music.126.net/hSrYgWVp_LKnE2EPZdt_dQ==/109951165779590359.jpg?imageView=1&type=webp&thumbnail=246x0",
      //     singnames: "生而为人",
      //     names: "刘易斯-生而为人",
      //   },
      //   {
      //     imgurls:
      //       "http://p2.music.126.net/YO9db8qwxxI0Uj6rCsVGXg==/17868163463382834.jpg?imageView=1&type=webp&thumbnail=246x0",
      //     singnames: "死如秋叶",
      //     names: "金善彬-死如秋叶",
      //   },
      //   {
      //     imgurls:
      //       "http://p2.music.126.net/Y2z7gAOZ7UyQX1dDY8H8Qw==/109951165603442419.jpg?imageView=1&type=webp&thumbnail=246x0",
      //     singnames: "大城小爱",
      //     names: "刘易斯-大城小爱",
      //   },
      //   {
      //     imgurls:
      //       "http://p2.music.126.net/78_j7_YW6MO5m94Uk4DCig==/109951165884860386.jpg?imageView=1&type=webp&thumbnail=246x0",
      //     singnames: "王牌大虾",
      //     names: "金善彬-王牌大虾",
      //   },
      //   {
      //     imgurls:
      //       "http://p2.music.126.net/hSrYgWVp_LKnE2EPZdt_dQ==/109951165779590359.jpg?imageView=1&type=webp&thumbnail=246x0",
      //     singnames: "生而为人",
      //     names: "刘易斯-生而为人",
      //   },
      //   {
      //     imgurls:
      //       "http://p2.music.126.net/YO9db8qwxxI0Uj6rCsVGXg==/17868163463382834.jpg?imageView=1&type=webp&thumbnail=246x0",
      //     singnames: "死如秋叶",
      //     names: "金善彬-死如秋叶",
      //   },
      // ],
      arr: [],
    };
  },
  mounted() {
    getlink("http://43n345b661.zicp.vip/tuijian/findAll").then((res) => {
      console.log(res);
      this.arr = res.data.data;
      console.log(this.arr);
    });
  },
  components: {
    Zj,
  },
};
</script>

<style scoped>
b {
  font-size: 0.4rem;
  font-weight: bold;
}
.zidong1 {
  font-size: 0.58rem;
  color: red;
  margin-left: 0.2rem;
}
.zidong {
  font-size: 0.58rem;
  line-height: 1.7rem;
  margin-left: 4rem;
}
.boFang {
  width: 100%;
  height: 1.7rem;
}

.big {
  position: relative;
}
img {
  width: 100%;
  height: 3.21rem;
}
.icon {
  top: 0.28rem;
  position: absolute;
  display: flex;
  margin-left: 0.58rem;
}
.fontz {
  font-size: 0.53rem;
  color: #fff;
}
span {
  display: block;
  width: 1.5rem;
  height: 0.79rem;
  background-color: rgb(224, 224, 224);
  opacity: 0.5;
  border-radius: 0.2rem;
  line-height: 0.79rem;
  text-align: center;
}
.jinri {
  margin-left: 0.58rem;
}
.lishi {
  margin-left: 3rem;
}
.btm {
  display: flex;
  position: absolute;
  bottom: 2.08rem;
}
.icon-gengduo-shuxiang {
  margin-left: 5.5rem;
}
</style>